<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>消息通知组件</title>
	<link rel="stylesheet" th:href="@{/layuimini/lib/layui-v2.6.3/css/layui.css}" media="all">
	<link rel="stylesheet" th:href="@{/layuimini/css/public.css}" media="all">
</head>
<body>
<div class="layuimini-container">
	<div class="layuimini-main">
		<div class="ok-body">
			<blockquote class="layui-elem-quote" style="padding: 5px;">
				1.layui第三方扩展组件：<font color="red" size="2">消息通知(notify)</font>；<br>
				2.本项目主要用于系统登陆成功时的提示信息，该组件主要显示消息图标、标题、内容、当前时间、关闭窗口及进度条；
			</blockquote>

			<button type="button" class="layui-btn layui-bg-blue" id="notice">消息提示</button>
			<button type="button" class="layui-btn layui-bg-blue" id="notice2">成功提示</button>
			<button type="button" class="layui-btn layui-bg-blue" id="notice3">警告提示</button>
			<button type="button" class="layui-btn layui-bg-blue" id="notice4">错误提示</button>

			<pre>
			// Step1. 引入依赖
			let notify = layui.notify;
			<br/>

			// Step2. 使用
			notify.notice({
			    title: "消息提示",
			    message: "我是消息提示消息提示消息提示消息提示"
			});

			notify.notice({
			    title: "成功提示",
			    type: "success",
			    message: "我是消息提示消息提示消息提示消息提示"
			});

			notify.notice({
			    title: "警告提示",
			    type: "warning",
			    message: "我是消息提示消息提示消息提示消息提示"
			});

			notify.notice({
			    title: "错误提示",
			    type: "error",
			    message: "我是消息提示消息提示消息提示消息提示"
			});
		</pre>
		</div>
	</div>
</div>
<script th:src="@{/layuimini/lib/layui-v2.6.3/layui.js}" charset="UTF-8"></script>
<script th:src="@{/layuimini/js/lay-config.js?v=1.0.4}" charset="UTF-8"></script>
<script type="text/javascript" th:inline="javascript">
    layui.use(["code", "notify"], function () {
        let code = layui.code;
        let notify = layui.notify;
        let $ = layui.jquery;

        code({
			elem: "pre",
			title: "代码示例",
			skin:'notepad', //设置显示风格
			about: false
        });

        $("#notice").click(function () {
			notify.notice({
                title: "消息提示",
                message: "我是消息提示消息提示消息提示消息提示"
            });
        });

        $("#notice2").click(function () {
			notify.notice({
                title: "成功提示",
                type: "success",
                message: "我是消息提示消息提示消息提示消息提示"
            });
        });

        $("#notice3").click(function () {
			notify.notice({
                title: "警告提示",
                type: "warning",
                message: "我是消息提示消息提示消息提示消息提示"
            });
        });

        $("#notice4").click(function () {
			notify.notice({
                title: "错误提示",
                type: "error",
                message: "我是消息提示消息提示消息提示消息提示"
            });
        });
    });
</script>
</body>
</html>
